<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input
        style="width: 200px;"
        class="filter-item"
        placeholder="订单编号"
        v-model="queryForm.voucherCode"
      ></el-input>
      <el-select
        clearable
        style="width: 170px"
        class="filter-item"
        v-model="queryForm.type"
        placeholder="投放类型"
      >
        <el-option
          v-for="(val, key) in Dicts.AD_PUTIN_ORDER_TYPE"
          :key="key"
          :label="val"
          :value="key"
        ></el-option>
      </el-select>
      <el-select
        clearable
        style="width: 170px"
        class="filter-item"
        v-model="queryForm.regionRange"
        placeholder="投放范围"
      >
        <el-option
          v-for="(val, key) in Dicts.AD_RANGE"
          :key="key"
          :label="val"
          :value="key"
        ></el-option>
      </el-select>
      <el-select
        clearable
        style="width: 170px"
        class="filter-item"
        v-model="queryForm.status"
        placeholder="投放状态"
      >
        <el-option
          v-for="(val, key) in Dicts.AD_PUTIN_ORDER_STATUS"
          :key="key"
          :label="val"
          :value="key"
        ></el-option>
      </el-select>
      <el-button
        class="filter-item"
        @click="doQuery"
        type="primary"
        icon="el-icon-search"
        >查询</el-button
      >
      <el-button
        v-permission="'putinOrder:add'"
        class="filter-item"
        @click="openAddDialog"
        type="success"
        icon="el-icon-plus"
        >新增</el-button
      >
    </div>
    <el-table v-loading="loading" :data="records" style="width: 100%">
      <el-table-column prop="rowId" label="ID" width="100" align="center">
      </el-table-column>
      <el-table-column
        prop="voucherCode"
        label="订单编号"
        width="250"
        align="center"
      >
      </el-table-column>
      <el-table-column prop="type" label="投放类型" width="150" align="center">
        <template slot-scope="scope">
          {{ Dicts.AD_PUTIN_ORDER_TYPE[scope.row.type] }}
        </template>
      </el-table-column>
      <el-table-column
        prop="regionRange"
        label="投放范围"
        width="150"
        align="center"
      >
        <template slot-scope="scope">
          {{ Dicts.AD_RANGE[scope.row.regionRange] }}
        </template>
      </el-table-column>
      <el-table-column
        prop="regionName"
        label="投放区域"
        width="150"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="beginDate"
        label="开始日期"
        width="200"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="endDate"
        label="结束日期"
        width="200"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="status"
        label="投放状态"
        width="150"
        align="center"
      >
        <template slot-scope="scope">
          {{ Dicts.AD_PUTIN_ORDER_STATUS[scope.row.status] }}
        </template>
      </el-table-column>
      <el-table-column
        prop="totalNum"
        label="投放设备总数"
        width="200"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="successNum"
        label="成功设备总数"
        width="200"
        align="center"
      >
      </el-table-column>
      <el-table-column
        align="center"
        label="操作"
        class-name="small-padding"
        fixed="right"
        width="400"
      >
        <template slot-scope="scope">
          <!-- <el-button size="mini" @click="detailsAdOrder(scope.row)" title="详情" icon="el-icon-search" circle></el-button> -->
          <!-- <el-button size="mini" type="primary" @click="checkOrder(scope.row)" title="编辑" icon="el-icon-edit" circle></el-button> -->
          <el-button
            v-permission="'putinOrder:launch'"
            size="mini"
            type="primary"
            v-if="scope.row.status === '0' ? true : false"
            @click="launch(scope.row.rowId)"
            :disabled="isDisable"
            title="投放"
            icon="el-icon-sort"
            circle
          ></el-button>
          <el-button
            v-permission="'putinOrder:revokeOrder'"
            size="mini"
            type="warning"
            v-if="scope.row.status === '1' ? true : false"
            @click="revokeOrder(scope.row.rowId)"
            title="撤销"
            icon="el-icon-refresh"
            circle
          ></el-button>
          <el-button
            v-permission="'putinOrder:cLaunch'"
            size="mini"
            type="success"
            v-if="scope.row.status === '9' ? true : false"
            @click="launch(scope.row.rowId)"
            :disabled="isDisable"
            title="重新投放"
            icon="el-icon-sort"
            circle
          ></el-button>
          <el-button
            v-permission="'putinOrder:statistics'"
            size="mini"
            type="success"
            v-if="scope.row.status === '1' ? true : false"
            @click="StatisticsOrder(scope.row.rowId)"
            title="统计"
            icon="el-icon-upload"
            circle
          ></el-button>
          <el-button
            v-permission="'putinOrder:detail'"
            type="primary"
            size="mini"
            @click="orderDetail(scope.row.rowId)"
            title="查看明细列表"
            icon="el-icon-search"
            circle
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-container">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryForm.current"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="queryForm.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="queryForm.total"
      >
      </el-pagination>
    </div>
    <!-- 修改添加 -->
    <el-dialog
      :title="`${editForm.rowId ? '编辑' : '新增'}广告投放订单`"
      :visible.sync="dialogFormVisible"
      :close-on-click-modal="false"
      width="50%"
    >
      <el-form
        :model="editForm"
        label-width="140px"
        :rules="editFormRules"
        ref="editForm"
      >
        <el-row>
          <el-col :span="11">
            <el-form-item label="投放类型:" prop="type">
              <el-select
                v-model="editForm.type"
                placeholder="投放类型"
                style="width: 100%;"
                @change="typeChange(editForm.type)"
              >
                <el-option
                  v-for="(val, key) in Dicts.AD_PUTIN_ORDER_TYPE"
                  :key="key"
                  :label="val"
                  :value="key"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="11" v-if="isUser">
            <el-form-item label="投放标" prop="provinceId">
              <el-select
                v-model="editForm.adBidMarkPayId"
                placeholder="标编号"
                style="width: 100%;"
                @change="
                  winTheBidByIdChange(editForm.adBidMarkPayId, editForm.type)
                "
              >
                <el-option
                  v-for="(item, index) in adBidMark"
                  :key="index"
                  :value="item.rowId"
                  :label="item.detailed"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="11" v-if="isPlatform">
            <el-form-item label="投放范围:" prop="regionRange">
              <el-select
                v-model="editForm.regionRange"
                placeholder="投放范围"
                style="width: 100%;"
                @change="rangeNameChange(editForm.regionRange)"
              >
                <el-option
                  v-for="(val, key) in Dicts.AD_RANGE"
                  :key="key"
                  :label="val"
                  :value="key"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row v-if="isUser">
          <el-col :span="11">
            <el-form-item label="投放范围:" prop="rangeName">
              <el-input
                v-model="editForm.rangeName"
                readonly="istrue"
                auto-complete="off"
              ></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="11">
            <el-form-item label="投放区域:" prop="regionName">
              <el-input
                v-model="editForm.regionName"
                readonly="istrue"
                auto-complete="off"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="22">
            <el-form-item label="投放区域:" prop="regionId" v-show="isShow">
              <el-select
                v-model="editForm.provinceId"
                placeholder="省"
                style="width: 25%;"
                v-show="isShowProvince"
                @change="value => cascade(value, 'chooseProvince')"
              >
                <el-option
                  v-for="(item, index) in provinces"
                  :key="index"
                  :value="item.rowId"
                  :label="item.cnName"
                ></el-option>
              </el-select>
              <el-select
                v-model="editForm.cityId"
                placeholder="市"
                style="width: 25%;"
                v-show="isShowCity"
                @change="value => cascade(value, 'chooseCity')"
              >
                <el-option
                  v-for="(item, index) in citys"
                  :key="index"
                  :value="item.rowId"
                  :label="item.cnName"
                ></el-option>
              </el-select>
              <el-select
                v-model="editForm.districtId"
                placeholder="区"
                style="width: 24%;"
                v-show="isShowRegin"
                @change="value => cascade(value, 'chooseRegin')"
              >
                <el-option
                  v-for="(item, index) in districts"
                  :key="index"
                  :value="item.rowId"
                  :label="item.cnName"
                ></el-option>
              </el-select>
              <el-select
                v-model="editForm.communityId"
                placeholder="小区"
                style="width: 24%;"
                v-show="isShowCommunity"
                @change="value => cascade(value, 'chooseCommunity')"
              >
                <el-option
                  v-for="(item, index) in communitys"
                  :key="index"
                  :value="item.rowId"
                  :label="item.name"
                ></el-option>
              </el-select>
              <el-select
                v-model="editForm.buildingId"
                class="filter-item"
                placeholder="楼栋"
                style="width: 100%;"
                v-show="false"
              >
                <el-option
                  v-for="(item, index) in buildings"
                  :key="index"
                  :value="item.rowId"
                  :label="item.name"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row v-if="isPlatform">
          <el-col :span="11">
            <el-form-item label="媒体类型:" prop="mediaType">
              <el-select
                v-model="editForm.mediaType"
                placeholder="媒体类型"
                style="width: 100%;"
              >
                <el-option
                  v-for="(val, key) in Dicts.AD_PUTIN_ORDER_MEDIA_TYPE"
                  :key="key"
                  :label="val"
                  :value="key"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="11">
            <el-form-item label="投放日期:" prop="dateTime">
              <el-date-picker
                v-model="editForm.dateTime"
                value-format="yyyy-MM-dd"
                type="daterange"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                style="width:100%"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="isUser">
          <el-col :span="11">
            <el-form-item label="媒体类型:" prop="mediaType">
              <el-select
                v-model="editForm.mediaType"
                placeholder="媒体类型"
                style="width: 100%;"
              >
                <el-option
                  v-for="(val, key) in Dicts.AD_PUTIN_ORDER_MEDIA_TYPE"
                  :key="key"
                  :label="val"
                  :value="key"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="广告时长:" prop="adDuration">
              <el-input
                v-model="editForm.adDuration"
                readonly="istrue"
                auto-complete="off"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row v-if="isUser">
          <el-col :span="22">
            <el-form-item label="投放日期:" prop="dateTime">
              <el-date-picker
                disabled="istrue"
                v-model="editForm.dateTime"
                value-format="yyyy-MM-dd"
                type="daterange"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row v-if="isPlatform">
          <div>
            <el-col :span="11">
              <el-form-item label="媒体资源:" prop="mediaUrl">
                <el-upload
                  v-model="editForm.mediaUrl"
                  class="upload-demo"
                  action=""
                  :data="{ dir: '/ads/' + this.imgDate }"
                  :file-list="files"
                  :http-request="upload"
                  :on-success="uploadAd"
                  :on-exceed="exceed"
                  list-type="picture"
                  accept="image/*, video/*"
                  :limit="1"
                >
                  <el-button size="small" type="primary"
                    >选择媒体资源</el-button
                  >
                </el-upload>
              </el-form-item>
            </el-col>

            <el-col :span="11">
              <el-form-item label="广告时长:" prop="adDuration">
                <el-select
                  v-model="editForm.adDuration"
                  placeholder="广告时长"
                  style="width: 100%;"
                >
                  <el-option
                    v-for="(val, key) in Dicts.AD_PUTIN_AD_DURATION"
                    :key="key"
                    :label="val"
                    :value="key"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="2">
              <el-button
                size="mini"
                type="primary"
                title="添加"
                icon="el-icon-plus"
                @click="addModel()"
                circle
              ></el-button>
            </el-col>
          </div>
        </el-row>
        <div v-for="(item, index) in addFrom" :key="index">
          <el-row>
            <el-col :span="11">
              <el-form-item label="媒体类型:">
                <el-select
                  v-model="mediaTypes[index]"
                  placeholder="媒体类型"
                  style="width: 100%;"
                >
                  <el-option
                    v-for="(val, key) in Dicts.AD_PUTIN_ORDER_MEDIA_TYPE"
                    :key="key"
                    :label="val"
                    :value="key"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="投放日期:">
                <el-date-picker
                  v-model="dateTimes[index]"
                  value-format="yyyy-MM-dd"
                  type="daterange"
                  range-separator="-"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  style="width:100%"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="11">
              <el-form-item label="媒体资源:">
                <el-upload
                  v-model="imgs[index]"
                  class="upload-demo"
                  action=""
                  :data="{
                    dir:
                      '/ads/' +
                      new Date().getFullYear() +
                      '' +
                      ((new Date().getMonth() + 1 + '').length === 2
                        ? new Date().getMonth() + 1 + ''
                        : '0' + (new Date().getMonth() + 1 + '')) +
                      '' +
                      ((new Date().getDate() + '').length === 2
                        ? new Date().getDate() + ''
                        : '0' + (new Date().getDate() + ''))
                  }"
                  :file-list="files"
                  :http-request="upload"
                  :on-success="
                    (res, file) => {
                      return handleHeadSuccess(res, file, index)
                    }
                  "
                  :on-exceed="exceed"
                  :on-remove="
                    (file, fileList) => {
                      return deleteSuccess(file, fileList, index)
                    }
                  "
                  :objectBing="index"
                  list-type="picture"
                  accept="image/*, video/*"
                  :limit="1"
                >
                  <el-button size="small" type="primary"
                    >选择媒体资源</el-button
                  >
                </el-upload>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="广告时长:">
                <el-select
                  v-model="adDurations[index]"
                  placeholder="广告时长"
                  style="width: 100%;"
                >
                  <el-option
                    v-for="(val, key) in Dicts.AD_PUTIN_AD_DURATION"
                    :key="key"
                    :label="val"
                    :value="key"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="2">
              <el-button
                size="mini"
                type="danger"
                title="删除"
                icon="el-icon-minus"
                @click="deleteIndex(index)"
                circle
              ></el-button>
            </el-col>
          </el-row>
        </div>

        <el-row v-if="isUser">
          <el-col :span="22">
            <el-form-item label="媒体资源:">
              <template>
                <img
                  :src="$oss(editForm.mediaUrl)"
                  alt
                  style="width: 225px;height: 150px"
                />
              </template>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="22">
            <el-form-item label="订单备注:">
              <el-input
                v-model="editForm.description"
                type="textarea"
                :rows="3"
                auto-complete="off"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="saveCilentHeadline(editForm.rowId, dateTime)"
          >确 定</el-button
        >
      </div>
    </el-dialog>

    <!-- 出价记录列表详情 -->
    <el-dialog
      :title="`广告投放订单明细`"
      :visible.sync="detailDialogFormVisible"
      width="80%"
    >
      <div class="filter-container">
        <!-- <el-input style="width: 200px;" class="filter-item" placeholder="用户姓名" v-model="queryPayForm.realName"></el-input>
        <el-input style="width: 200px;" class="filter-item" placeholder="出价单号" v-model="queryPayForm.voucherCode"></el-input>
        <el-select clearable style="width: 170px" class="filter-item" v-model="queryPayForm.payType" placeholder="请选择支付方式">
          <el-option v-for="(val, key) in Dicts.PAY_TYPE" :key="key" :label="val" :value="key"></el-option>
        </el-select>
        <el-select clearable style="width: 170px" class="filter-item" v-model="queryPayForm.status" placeholder="请选择出价状态">
          <el-option v-for="(val, key) in Dicts.MARK_PAY_RECORD_STATUS" :key="key" :label="val" :value="key"></el-option>
        </el-select>
        <el-button class="filter-item" @click="doQueryPay" type="primary" icon="el-icon-search" >查询</el-button> -->
      </div>
      <el-table v-loading="loading" :data="recordsDetail" style="width: 100%">
        <el-table-column prop="rowId" label="ID" width="120"> </el-table-column>
        <el-table-column prop="mediaType" label="媒体类型">
          <template slot-scope="scope">
            {{ Dicts.AD_PUTIN_ORDER_MEDIA_TYPE[scope.row.mediaType] }}
          </template>
        </el-table-column>
        <el-table-column prop="mediaUrl" label="媒体资源" width="300">
          <template slot-scope="scope">
            <div v-viewer>
              <img
                style="width:30px;height:30px;border-radius:5px;"
                v-if="scope.row.mediaUrl"
                :src="$oss(scope.row.mediaUrl)"
              />
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="adDuration" label="广告时长">
          <template slot-scope="scope">
            {{ Dicts.AD_PUTIN_AD_DURATION[scope.row.adDuration] }}
          </template>
        </el-table-column>
        <el-table-column prop="playTimes" label="播放次数"> </el-table-column>
        <el-table-column prop="beginDate" label="开始时间" width="150">
        </el-table-column>
        <el-table-column prop="endDate" label="结束时间"> </el-table-column>
        <el-table-column align="center" label="" class-name="small-padding">
        </el-table-column>
      </el-table>
      <div class="pagination-container">
        <el-pagination
          background
          @size-change="handleSizeChangeDetail"
          @current-change="handleCurrentChangeDetail"
          :current-page="queryDetailForm.current"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="queryDetailForm.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="queryDetailForm.total"
        >
        </el-pagination>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  queryPutinOrder,
  queryWinTheBidList,
  queryWinTheBidById,
  addOrEditPutinOrder,
  advertLaunch,
  queryPutinOrderDetail,
  revoke
} from '@/api/ad'
import { queryProvince, getCity, getDistrict } from '@/api/area'
import {
  selectAllCommunity,
  selectByCommunityIdBuilding
} from '@/api/community'
import 'viewerjs/dist/viewer.css'
import Viewer from 'v-viewer'
import Vue from 'vue'
Vue.use(Viewer)
export default {
  name: 'putinOrder',
  data() {
    return {
      detailDialogFormVisible: false,
      isPlatform: false,
      isShow: false,
      isShowProvince: false,
      isShowCity: false,
      isShowRegin: false,
      isShowCommunity: false,
      isUser: false,
      istrue: true,
      dialogFormVisible: false,
      loading: false,
      detailedFormVisible: false,
      queryForm: {
        current: 1,
        pages: 0,
        total: 0,
        size: 10,
        title: undefined
      },
      queryDetailForm: {
        current: 1,
        pages: 0,
        total: 0,
        size: 10,
        title: undefined
      },
      editForm: {
        rowId: 0,
        voucherCode: '',
        type: '',
        regionRange: '',
        regionName: '',
        mediaType: '',
        mediaUrl: '',
        adDuration: '',
        beginDate: '',
        endDate: '',
        remark: '',
        adBidMarkPayId: '',
        dateTime: '',
        regionId: '',
        totalNum: '',
        dateTimes: [],
        mediaTypes: [],
        adDurations: [],
        mediaUrls: []
      },
      imgDate: '',
      count: 0,
      objectBing: null,
      dateTimes: [],
      mediaTypes: [],
      adDurations: [],
      imgs: [],
      addFrom: [],
      dates: [],
      dateTime: '',
      adBidMark: [],
      recordsDetail: [],
      records: [],
      provinces: [],
      citys: [],
      districts: [],
      communitys: [],
      buildings: [],
      type: '',
      isDisable: false,
      imglist: [],
      videolist: [],
      suffix: '',
      onlySuffix: '',
      vedioNum: 0,
      editFormRules: {
        type: [{ required: true, message: '请选择投放类型', trigger: 'blur' }],
        regionRange: [
          { required: true, message: '请选择投放范围', trigger: 'blur' }
        ],
        regionId: [
          { required: true, message: '请选择投放区域', trigger: 'blur' }
        ],
        mediaType: [
          { required: true, message: '请选择媒体类型', trigger: 'blur' }
        ],
        mediaUrl: [
          { required: true, message: '请选择媒体资源', trigger: 'blur' }
        ],
        adDuration: [
          { required: true, message: '请选择广告时长', trigger: 'blur' }
        ],
        dateTime: [
          { required: true, message: '请选择投放日期', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.initOssClient().then(_ => {
      this.doQuery()
    })
  },
  methods: {
    upload(options) {
      this.uploadForElement(options)
    },
    uploadAd(response, file, fileList) {
      this.editForm.mediaUrl = response.name
    },
    handleHeadSuccess(response, file, index) {
      this.imgs[index] = response.name
    },
    deleteSuccess(file, fileList, index) {
      this.imgs.splice(index, 1)
    },
    handleCurrentChange(current) {
      this.queryForm.current = current
      this.doQuery()
    },
    handleSizeChange(size) {
      this.queryForm.size = size
      this.doQuery()
    },
    doQuery() {
      this.loading = true
      queryPutinOrder(this.queryForm).then(({ data: { data } }) => {
        this.queryForm.current = data.current
        this.queryForm.pages = data.pages
        this.queryForm.total = data.total
        this.queryForm.size = data.size
        this.records = data.records
        this.loading = false
      })
      const month = new Date().getMonth() + 1 + ''
      const day = new Date().getDate() + ''
      this.imgDate =
        new Date().getFullYear() +
        '' +
        (month.length === 2 ? month : '0' + month) +
        '' +
        (day.length === 2 ? day : '0' + day)
    },
    openAddDialog() {
      this.addFrom.splice(0, this.count)
      this.imgs.splice(0, this.count)
      this.adDurations.splice(0, this.count)
      this.mediaTypes.splice(0, this.count)
      this.dateTimes.splice(0, this.count)
      this.isShow = false
      this.isShowProvince = false
      this.isShowCity = false
      this.isShowRegin = false
      this.isPlatform = false
      this.isShowCommunity = false
      this.isUser = false
      this.istrue = true
      this.editForm = {}
      this.files = []
      this.dialogFormVisible = true
      queryWinTheBidList().then(({ data: { data } }) => {
        this.adBidMark = data
      })
    },
    winTheBidByIdChange(param, type) {
      this.editForm = {}
      queryWinTheBidById(param).then(({ data: { data } }) => {
        this.editForm = {
          regionName: data.regionName,
          regionRange: data.regionRange,
          rangeName: data.rangeName,
          adDuration: data.adDuration + '秒',
          dateTime: [data.putinStartDate, data.putinEndDate],
          mediaUrl: data.photo,
          regionId: data.regionId,
          totalNum: data.screenNum,
          adBidMarkPayId: param,
          type: type
        }
      })
    },
    saveCilentHeadline(rowId) {
      if (this.editForm.type === '1') {
        this.editForm.adDuration = this.editForm.adDuration.substring(
          0,
          this.editForm.adDuration.length - 1
        )
      }
      if (this.editForm.type === '2') {
        if (this.editForm.regionRange === '1') {
          this.editForm.regionId = this.editForm.provinceId
        }
        if (this.editForm.regionRange === '2') {
          this.editForm.regionId = this.editForm.cityId
        }
        if (this.editForm.regionRange === '3') {
          this.editForm.regionId = this.editForm.districtId
        }
        if (this.editForm.regionRange === '4') {
          this.editForm.regionId = this.editForm.communityId
        }
      }
      this.videolist = ['mp4', 'm2v', 'mkv', 'avi', 'rmvb', 'mov']
      this.imglist = ['png', 'jpg', 'jpeg', 'bmp', 'gif']
      // 后缀获取
      try {
        const onlyFlieArr = this.editForm.mediaUrl.split('.')
        this.onlySuffix = onlyFlieArr[onlyFlieArr.length - 1]
      } catch (err) {
        this.onlySuffix = ''
      }
      // fileName无后缀返回 fals
      if (this.editForm.mediaType === '1') {
        if (
          this.onlySuffix === '' ||
          this.imglist.indexOf(this.onlySuffix) === -1
        ) {
          this.$message({
            message: '第1组，媒体资源格式不是图片格式，请重新选择',
            type: 'error'
          })
          return
        }
      }
      if (this.editForm.mediaType === '2') {
        if (
          this.onlySuffix === '' ||
          this.videolist.indexOf(this.onlySuffix) === -1
        ) {
          this.$message({
            message: '第1组，媒体资源格式不是视频格式，请重新选择',
            type: 'error'
          })
          return
        }
      }
      for (let index = 0; index < this.count; index++) {
        if (this.dateTimes[index] === undefined) {
          this.$message({
            message: '第' + (index + 2) + '组，投放日期为空，请选择',
            type: 'error'
          })
          return
        }
        if (this.imgs[index] === undefined) {
          this.$message({
            message: '第' + (index + 2) + '组，媒体资源为空，请选择',
            type: 'error'
          })
          return
        }
        if (this.adDurations[index] === undefined) {
          this.$message({
            message: '第' + (index + 2) + '组，广告时长为空，请选择',
            type: 'error'
          })
          return
        }
        if (this.mediaTypes[index] === undefined) {
          this.$message({
            message: '第' + (index + 2) + '组，媒体类型为空，请选择',
            type: 'error'
          })
          return
        }
        // 后缀获取
        try {
          const flieArr = this.imgs[index].split('.')
          this.suffix = flieArr[flieArr.length - 1]
        } catch (err) {
          this.suffix = ''
        }
        if (this.mediaTypes[index] === '1') {
          if (this.suffix === '' || this.imglist.indexOf(this.suffix) === -1) {
            this.$message({
              message:
                '第' + (index + 2) + '组，媒体资源格式不是图片格式，请重新选择',
              type: 'error'
            })
            return
          }
        }
        if (this.mediaTypes[index] === '2') {
          if (
            this.suffix === '' ||
            this.videolist.indexOf(this.suffix) === -1
          ) {
            this.$message({
              message:
                '第' + (index + 2) + '组，媒体资源格式不是视频格式，请重新选择',
              type: 'error'
            })
            return
          }
        }
      }
      this.editForm.dateTimes = this.dateTimes
      this.editForm.mediaTypes = this.mediaTypes
      this.editForm.adDurations = this.adDurations
      this.editForm.mediaUrls = this.imgs
      if (this.editForm.mediaType === '2') {
        this.vedioNum++
      }
      for (let i = 0; i < this.editForm.mediaTypes.length; i++) {
        if (this.editForm.mediaTypes[i] === '2') {
          this.vedioNum++
        }
      }
      if (this.vedioNum > 3) {
        this.vedioNum = 0
        this.$message({
          message: '最多只允许上传三个视频！您已超出个数',
          type: 'error'
        })
        return
      }
      this.$refs.editForm.validate(valid => {
        if (valid) {
          this.dates = this.editForm.dateTime.splice(',')
          this.editForm.beginDate = this.dates[0]
          this.editForm.endDate = this.dates[1]
          addOrEditPutinOrder(this.editForm).then(
            ({ data: { data, msg, code } }) => {
              if (code === 0) {
                this.doQuery()
                this.dialogFormVisible = false
              }
              this.$message({
                showClose: true,
                message: msg,
                type: code === 0 ? 'success' : 'error'
              })
            }
          )
        } else {
          return false
        }
      })
    },
    typeChange(type) {
      if (type === '1') {
        this.isUser = true
        this.isPlatform = false
      }
      if (type === '2') {
        this.isPlatform = true
        this.isUser = false
        queryProvince().then(({ data: { data } }) => {
          this.provinces = data
          this.loading = false
        })
      }
    },
    cascade(rowId, level, param) {
      if (rowId !== '') {
        switch (level) {
          case 'chooseProvince':
            getCity(rowId).then(({ data: { data } }) => {
              this.editForm.cityId = ''
              this.editForm.districtId = ''
              this.editForm.communityId = ''
              this.citys = []
              this.districts = []
              this.communitys = []
              this.citys = data
            })
            return
          case 'chooseCity':
            getDistrict(rowId).then(({ data: { data } }) => {
              this.editForm.districtId = ''
              this.editForm.communityId = ''
              this.districts = []
              this.communitys = []
              this.districts = data
            })
            return
          case 'chooseRegin':
            selectAllCommunity(rowId).then(({ data: { data } }) => {
              this.editForm.communityId = ''
              this.communitys = []
              this.communitys = data
            })
            return
          case 'chooseCommunity':
            selectByCommunityIdBuilding(rowId).then(({ data: { data } }) => {
              this.editForm.buildId = ''
              this.editForm.unitId = ''
              this.buildings = []
              this.units = []
              this.buildings = data
            })
            return
        }
      }
    },
    exceed() {
      this.$confirm('超出限制，请先删除在选择', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
    },
    rangeNameChange(param) {
      this.isShow = true
      if (param === '1') {
        this.isShowProvince = true
        this.isShowCity = false
        this.isShowRegin = false
        this.isShowCommunity = false
      }
      if (param === '2') {
        this.isShowProvince = true
        this.isShowCity = true
        this.isShowRegin = false
        this.isShowCommunity = false
      }
      if (param === '3') {
        this.isShowProvince = true
        this.isShowCity = true
        this.isShowRegin = true
        this.isShowCommunity = false
      }
      if (param === '4') {
        this.isShowProvince = true
        this.isShowCity = true
        this.isShowRegin = true
        this.isShowCommunity = true
      }
    },
    detailsAdOrder(row) {
      this.detailedFormVisible = true
      this.typeChange(row.type)
      this.detailed = {
        regionName: row.regionName,
        regionRange: row.regionRange,
        rangeName: row.rangeName,
        adDuration: row.adDuration + '秒',
        dateTime: row.dateTime,
        mediaUrl: row.photo,
        regionId: row.regionId,
        totalNum: row.screenNum,
        adBidMarkPayId: row.adBidMarkPayId.toString(),
        type: row.type
      }
    },
    launch(rowId) {
      this.isDisable = true
      advertLaunch(rowId).then(({ data: { data, msg, code } }) => {
        this.doQuery()
        if (code === 0) {
          this.isDisable = false
          this.$message({
            showClose: true,
            message: '任务已创建',
            type: code === 0 ? 'success' : 'error'
          })
        }
      })
    },
    addModel() {
      // if (this.imgs.length === 0) {
      this.addFrom.push({})
      this.count++
      if (this.count >= 20) {
        this.$confirm('最多只能同时投放二十个广告', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        this.addFrom.pop({})
      }
      // }
      // this.imgs.forEach((item, index) => {
      // });
    },
    deleteIndex(index) {
      this.addFrom.splice(index, 1)
      this.imgs.splice(index, 1)
      this.adDurations.splice(index, 1)
      this.mediaTypes.splice(index, 1)
      this.dateTimes.splice(index, 1)
      this.count--
      // this.adDurations[index + 2] = []
      // this.mediaTypes[index + 2] = []
      // this.dateTimes[index + 2] = []
      // this.imgs[index + 2] = []
    },
    handleCurrentChangeDetail(current) {
      this.queryDetailForm.current = current
      this.doQueryDetail()
    },
    handleSizeChangeDetail(size) {
      this.queryDetailForm.size = size
      this.doQueryDetail()
    },
    doQueryDetail() {
      this.loading = true
      queryPutinOrderDetail(this.queryDetailForm).then(({ data: { data } }) => {
        this.queryDetailForm.current = data.current
        this.queryDetailForm.pages = data.pages
        this.queryDetailForm.total = data.total
        this.queryDetailForm.size = data.size
        this.recordsDetail = data.records
        this.loading = false
      })
    },
    orderDetail(rowId) {
      this.detailDialogFormVisible = true
      this.queryDetailForm = {
        orderId: rowId
      }
      this.doQueryDetail()
    },
    revokeOrder(rowId) {
      this.$confirm('此操作将撤销投放广告订单, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.type = '1'
        revoke(rowId, this.type).then(({ data: { data, msg } }) => {
          this.doQuery()
          this.$message({
            showClose: true,
            message: '撤销指令已发送',
            type: 'success'
          })
        })
      })
    },
    StatisticsOrder(rowId) {
      this.type = '2'
      revoke(rowId, this.type).then(({ data: { data, msg } }) => {
        this.doQuery()
        this.$message({
          showClose: true,
          message: '统计指令已发送',
          type: 'success'
        })
      })
    }
  },
  components: {}
}
</script>

<style scoped></style>
